<template>
    <div class="accumulateduser">
      <div class="accuser_input">
        <input type="text" placeholder="请输入用户昵称" v-model="searchtxt">
        <span @click="search">搜索</span>
      </div>
      <scroll class="wrapper" :data="accuserlist" :pullup="pullup" :pulldown="pulldown" @pulldown="loadData"  @pullup="nextpage">
        <div  v-if="haveorno == 1">
          <AccumulatedList :accuserlist="accuserlist"></AccumulatedList>
          <PageTip :tipshow="tipshow" ></PageTip>
        </div>
        <Nothing v-if="haveorno == 0">
          <template #texttip>你还没有任何用户哦</template>
          <template #imgtip><img src="./../../assets/img/noanyuser.png" alt=""></template>
        </Nothing>
        <Nothing v-if="haveorno == 2">
          <template #texttip>没有找到相关内容</template>
          <template #imgtip><img src="./../../assets/img/noanysearch.png" alt=""></template>
        </Nothing>
      </scroll>
    </div>
</template>

<script>
import AccumulatedList from './components/AccumulatedList'
import Nothing from './../MyDiscount/components/Nothing'
import {getSpreadUserList} from '@/api/fetch'
import Scroll from "@/components/Scroll"
import PageTip from "./../MoreBoom/components/PageTip"



export default {
  name: 'AccumulatedUser',
  data () {
    return {
      haveorno: 1,
      page:1,
      tipshow:"1",
      pullup:true,
      pulldown:true,
      searchtxt: '',
      accuserlist: [

      ]
    }
  },
  components: {
    AccumulatedList,
    Nothing,
    Scroll,
    PageTip
  },
  watch: {
    'searchtxt': function (e) {
      if (e == '') {
        this.haveorno = 0
        this.getSpreadUserList(1).then(res=>{
          if (res.data.length > 0) {
            this.haveorno = 1
            this.accuserlist = res.data
          } else {
            this.haveorno = 0
          }
        })
      }
    }
  },
  methods: {
    search () {
      this.getSpreadUserList(1).then(res=>{
        if (res.data.length > 0) {
          this.haveorno = 1
          this.accuserlist = res.data
        } else {
          this.haveorno = 2
        }
      })
    },

    loadData(){
      this.page = 1
      this.tipshow = 1
      this.getSpreadUserList(1).then( res =>{
        if (res.data.length > 0) {
          this.haveorno = 1
          this.accuserlist = res.data
        } else {
          this.haveorno = 0
        }
      })
    },

    nextpage(){
      this.page=this.page+1
      console.log(this.page)
      this.getSpreadUserList(this.page).then( res =>{
        if(res.data.length > 0){
          this.accuserlist = this.accuserlist.concat(res.data)
        }else {
          this.page=this.page-1
          this.tipshow = 0
        }
      })
    },

    async getSpreadUserList (thepage) {
      const res = await getSpreadUserList({
        page: thepage,
        keyword: this.searchtxt
      })
      console.log(res)
      return res
    }
  },
  mounted () {
    this.loadData()
  },
  updated() {

  }
}
</script>

<style lang="less" scoped>
  @import '~less/variable.less';
  @import '~less/mixins.less';
  .wrapper{
    height: 85vh;
    overflow: hidden;
  }
  .accumulateduser{
    .h100();
    .accuser_input{
      width: 100%;
      height: 70px;
      border-bottom: 5px solid #f4f4f4;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      input{
        line-height: 30px;
        width: 75%;
        margin-right: 10px;
        border:none;
        border-radius: 8px;
        height: 30px;
        color: #acacac;
        background: #f4f4f4;
        padding-left: 20px;
        font-size: 15px;
      }
      span{
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
</style>
